<template>
	<div class="zhiShi">
		<div class="bfff left-bottom">
			<div class="center flex-start table-head fWrap">
				<div class="c666 f14 timi-dis">{{ titleType }}：</div>
				<div>
					<el-date-picker
						type="date"
						placeholder="请选择发布日期"
						value-format="YYYY-MM-DD 00:00:00"
						v-model="times"
						:disabled-date="pickerOptions"
					></el-date-picker>
				</div>
				<div class="c666 f14">标题：</div>
				<div>
					<el-input
						clearable
						type="text"
						placeholder="请输入标题..."
						v-model="title"
						@keyup.enter.native="searchList"
					/>
				</div>
				<el-button class="primary" type="primary" @click="searchList">搜索</el-button>
				<el-button type="primary" plain @click="resetting">重置</el-button>
			</div>
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="我上传的" name="2"></el-tab-pane>
				<el-tab-pane label="我下载的" name="3" v-if="typeStr != 2"></el-tab-pane>
				<el-tab-pane label="我点评的" name="4"></el-tab-pane>
				<el-tab-pane label="最近浏览" name="1"></el-tab-pane>
				<el-tab-pane label="回收站" name="5"></el-tab-pane>
			</el-tabs>
			<div class="btnx">
				<el-button :type="actives == '1' ? 'primary' : ''" :disabled="activeName == '3'" @click="theme"
					>主题知识库</el-button
				>
				<el-button :type="actives == '2' ? 'primary' : ''" @click="videos" v-if="activeName != '3'"
					>企业视频课程库</el-button
				>
			</div>
			<!-- 高级搜索展开部分 -->
			<div class="left-top-content">
				<div class="center row disNo">
					<div class="label f14 c333">已选条件:</div>
					<div class="flex center flex-start">
						<div v-if="divideList.length > 0">
							<el-tag
								class="choice-tag"
								closable
								round
								effect="light"
								@close="delLists(index)"
								v-for="(item, index) in divideNames"
								:key="index"
							>
								<div v-if="item.stName">{{ item.stName }}</div>
								<div v-else>{{ item.name }}</div>
							</el-tag>
							<el-button type="primary" link @click="delList" v-if="divideList.length > 0"
								>清空筛选</el-button
							>
						</div>
					</div>
				</div>
				<div class="center row nav">
					<div class="label f14 c333">所属目录:</div>
					<div class="flex center flex-start fen-ax">
						<div
							:class="item.id == active ? 'ctheme' : ''"
							class="c666 f14 hover"
							@click="divides(item, index)"
							v-for="(item, index) in divide"
							:key="item.id"
						>
							{{ item.name }}
						</div>
					</div>
					<el-switch v-model="switchValue" active-text="多选" class="disNo" />
				</div>
				<div class="center row nav" v-if="children && children.length">
					<div class="label f14 c333">所属分类:</div>
					<div class="flex center flex-start fen-ax">
						<div
							:class="isActive(item) ? 'ctheme' : ''"
							@click="dividess(item)"
							class="c666 f14 hover"
							v-for="(item, index) in children"
							:key="item.id"
						>
							{{ item.name }}
						</div>
					</div>
				</div>
			</div>
			<div class="dangerB" v-if="activeName == 5">
				<el-button type="danger" @click="delTags" plain>批量删除</el-button>
			</div>
			<div class="table-scrol">
				<div class="table">
					<!-- @cell-click="cellClick" -->
					<el-table :data="list" @select="selectClick" @select-all="selectAll" style="width: 100%">
						<el-table-column align="center" type="selection" min-width="60" v-if="activeName == 5" />
						<el-table-column align="center" prop="title" label="标题" show-overflow-tooltip min-width="200">
							<template #default="{ row }">
								<el-button link type="primary" @click="cellClick(row)">{{ row.title }}</el-button>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							prop="ctName"
							label="分类"
							show-overflow-tooltip
							min-width="150"
						>
							<template #default="{ row }">
								<div @click="cellClick(row)">{{ row.ctName }}</div>
							</template>
						</el-table-column>
						<el-table-column align="center" label="作者" min-width="150">
							<template #default="{ row }">
								<div @click="cellClick(row)" v-if="row.createName">{{ row.createName }}</div>
								<div @click="cellClick(row)" v-else>{{ row.createUser }}</div>
							</template>
						</el-table-column>
						<el-table-column align="center" label="状态" min-width="150">
							<template #default="{ row }">
								<el-text type="primary" v-if="row.status == 1">发布</el-text>
								<el-text type="warning" v-else>未发布</el-text>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							prop="pubTime"
							label="发布日期"
							show-overflow-tooltip
							min-width="200"
						>
							<template #header>
								<div>{{ titleType }}</div>
							</template>
							<template #default="{ row }">
								<div @click="cellClick(row)" v-if="row.pubTime">
									{{ time(row.pubTime) }}
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="readCount" label="浏览量" min-width="100" />
						<el-table-column align="center" prop="readCounts" label="操作" min-width="150">
							<template #header>
								<div v-if="activeName == 5 || activeName == 2">操作</div>
							</template>
							<template #default="{ row }">
								<div v-if="activeName == 5">
									<el-button :icon="Refresh" @click="restore(row)" title="恢复"></el-button>
									<el-button :icon="Delete" @click="delRestore(row)" title="删除"></el-button>
								</div>
								<div v-if="activeName == 2">
									<el-button :icon="EditPen" @click="edit(row)" title="编辑"></el-button>
									<el-button :icon="Delete" @click="editTable(row)" title="删除"></el-button>
								</div>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
				</div>
			</div>
			<div class="bfff pagination-class">
				<v-pagination
					:total="+total"
					v-model:size="pageSize"
					v-model:page="current"
					@pagination="fetchList"
					@paginations="fetchLists"
				></v-pagination>
			</div>
		</div>
	</div>
</template>

<script setup>
import { Search, RefreshRight, EditPen, Delete, Refresh } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const visible = ref(false)
const setShowMore = () => {
	visible.value = !visible.value
}
const total = ref(0)
const current = ref(1)
const list = ref([])
const activeName = ref("2")
//分类
const active = ref("")
const divide = ref([])
let divideList = ref([])
const children = ref([])
const typeStr = ref(1)
const divideNames = computed(() => divideList.value.map(item => item))
// const divideId = computed(() => divideList.value.map(item => item.id))
const checked = ref([])
//多选
const switchValue = ref(false)
//按钮高亮
const actives = ref("1")
const buttonStr = ref("1")
const pageSize = ref(10)
//标题
const title = ref("")
const times = ref("")
const eventStr = ref("2")
//二级分类
async function created() {
	if (route.query.type) {
		activeName.value = route.query.type
	}
	const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategory`)
	if (res && res.length) {
		divide.value = res
		divide.value.unshift({
			id: "",
			name: "不限",
		})
	} else {
		divide.value = []
	}
	if (activeName.value == "4") {
		const ress = await getAxios(
			`/knowledge/kbComment/recentComment?current=${current.value}&size=10&type=${typeStr.value}`
		)
		total.value = +ress.total
		list.value = ress.records
	} else if (activeName.value == "5") {
		const ress = await getAxios(`/knowledge/kbBasicTrash/page?type=${typeStr.value}`)
		total.value = +ress.total
		list.value = ress.records
	} else {
		const ress = await getAxios(
			`/kb/modelBaisc/selectBasic?status=${activeName.value || 1}&current=${current.value}&size=10&type=${
				typeStr.value
			}`
		)
		total.value = +ress.total
		list.value = ress.records
	}
}
created()
const cellClick = row => {
	if (activeName.value != 5) {
		if (typeStr.value == "1") {
			router.push(`/knowledgeDetails?id=${row.id}&swId=${row.swId}`)
		} else {
			router.push(`/videoDetails?id=${row.id}&swId=${row.swId}`)
		}
	}
}
const titleType = ref("发布日期")
const handleClick = async event => {
	eventStr.value = event.props.name
	listTable(event.props.name)
	empty()
}
function time(times) {
	return times.substring(0, 10)
}
// 目录高亮
function isActive(item) {
	return !!~checked.value.findIndex(check => check.id == item.id)
}
//主题知识库
const theme = async () => {
	buttonStr.value = "1"
	actives.value = "1"
	typeStr.value = 1
	checked.value = []
	divideList.value = []
	children.value = []
	const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategory`)
	if (res.length) {
		divide.value = res
		divide.value.unshift({
			id: "",
			name: "不限",
		})
	} else {
		divide.value = []
	}
	getUrl()
}
async function listTable(val) {
	if (val == "4") {
		titleType.value = "点评日期"
		const res = await getAxios(
			`/knowledge/kbComment/recentComment?current=${current.value}&size=10&type=${typeStr.value}`
		)
		total.value = +res.total
		list.value = res.records
	} else if (val == "5") {
		titleType.value = "操作日期"
		const res = await getAxios(`/knowledge/kbBasicTrash/page?type=${typeStr.value}`)
		total.value = +res.total
		list.value = res.records
	} else {
		if (val == "1") {
			titleType.value = "浏览日期"
		} else if (val == "3") {
			titleType.value = "下载日期"
			// typeStr.value = "1"
		} else if (val == "2") {
			titleType.value = "发布日期"
		}
		const res = await getAxios(
			`/kb/modelBaisc/selectBasic?status=${val}&current=${current.value}&size=10&type=${typeStr.value}`
		)
		total.value = +res.total
		list.value = res.records
	}
}
async function getUrl() {
	if (activeName.value == "4") {
		const res = await getAxios(
			`/knowledge/kbComment/recentComment?current=${current.value}&size=10&type=${typeStr.value}`
		)
		total.value = +res.total
		list.value = res.records
	} else if (activeName.value == "5") {
		const res = await getAxios(`/knowledge/kbBasicTrash/page?type=${typeStr.value}`)
		total.value = +res.total
		list.value = res.records
	} else {
		const res = await getAxios(
			`/kb/modelBaisc/selectBasic?status=${eventStr.value}&current=${current.value}&size=10&type=${typeStr.value}`
		)
		total.value = +res.total
		list.value = res.records
	}
}
//视频库
const videos = async () => {
	buttonStr.value = "2"
	actives.value = "2"
	typeStr.value = 2

	const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategoryVideo?isSearch=1`)
	if (res) {
		divide.value = [res]
		divide.value.unshift({
			id: "",
			name: "不限",
		})
	} else {
		divide.value = []
	}
	checked.value = []
	divideList.value = []
	children.value = []
	getUrl()
}
//分类
const divides = (item, index) => {
	active.value = item.id
	if (item.children && item.children.length) {
		children.value = item.children
		if (children.value[0].name != "不限") {
			children.value.unshift({
				id: item.id,
				name: "不限",
				stName: item.name + "/" + "不限",
			})
		}
		if (!switchValue.value) {
			checked.value = []
			divideList.value = []
		}
		if (item.name == "不限") {
			children.value = []
			divideList.value = []
			created()
		}
		dividess(children.value[0])
	} else {
		children.value = []
		children.value.unshift({
			id: item.id,
			name: "不限",
			stName: item.name + "/" + "不限",
		})
		list.value = []
		dividess(children.value[0])
	}
}
const dividess = async item => {
	if (switchValue.value) {
		if (isActive(item)) {
			const index = checked.value.findIndex(check => check.id == item.id)
			checked.value = checked.value.filter(check => check.id != item.id)
			divideList.value.splice(index, 1)
		} else {
			checked.value.push(item)

			divideList.value.push(item)
		}
	} else {
		checked.value = checked.value.filter(check => check.id != item.id)
		checked.value = []
		divideList.value = []
		checked.value.push(item)
		divideList.value.push(item)
	}
	jian()
	if (divideList.value.length == 0) {
		empty()
	}
}
watch(switchValue, () => {
	if (!switchValue.value) {
		checked.value = []
		divideList.value = []
	}
})
watch(activeName, () => {
	active.value = ""
	checked.value = []
	children.value = []
	divideList.value = []
	title.value = ""
	times.value = ""
	// created()
})
//清空
const delList = () => {
	active.value = ""
	checked.value = []
	children.value = []
	divideList.value = []
	getUrl()
	// created()
}
async function jian() {
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	if (activeName.value == "4") {
		const rss = await getAxios(`/knowledge/kbComment/recentComment`, {
			current: 1,
			size: 10,
			categoryIds: idlist.join(),
			title: title.value,
			swIds: swIdList.join(),
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = +rss.total
		list.value = rss.records
	} else if (activeName.value == "5") {
		const rss = await getAxios(`/knowledge/kbBasicTrash/page`, {
			current: 1,
			size: 10,
			swIds: swIdList.join(),
			categoryIds: idlist.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = +rss.total
		list.value = rss.records
	} else {
		const rss = await getAxios(`/kb/modelBaisc/selectBasic`, {
			current: 1,
			size: 10,
			status: activeName.value,
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = +rss.total
		list.value = rss.records
	}
}
const searchList = () => {
	jian()
	// times.value = ""
	// title.value = ""
	current.value = "1"
}
const resetting = async () => {
	title.value = ""
	times.value = ""
	active.value = ""
	checked.value = []
	children.value = []
	divideList.value = []
	if (activeName.value == "4") {
		const rss = await getAxios(`/knowledge/kbComment/recentComment`, {
			current: 1,
			size: 10,
			type: typeStr.value,
		})
		total.value = +rss.total
		list.value = rss.records
	} else if (activeName.value == "5") {
		const rss = await getAxios(`/knowledge/kbBasicTrash/page`, {
			current: 1,
			size: 10,
			type: typeStr.value,
		})
		total.value = +rss.total
		list.value = rss.records
	} else {
		created()
	}
	current.value = "1"
}
const fetchList = async val => {
	restoreList.value = []

	current.value = val
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	if (activeName.value == "5") {
		const res = await getAxios(`/knowledge/kbBasicTrash/page`, {
			current: val,
			size: 10,
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = res.total
		list.value = res.records
	} else if (activeName.value == "4") {
		const res = await getAxios(`/knowledge/kbComment/recentComment`, {
			current: val,
			size: 10,
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = res.total
		list.value = res.records
	} else {
		const res = await getAxios(`/kb/modelBaisc/selectBasic`, {
			current: val,
			size: 10,
			status: activeName.value,
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = res.total
		list.value = res.records
	}
}
const fetchLists = async val => {
	restoreList.value = []
	pageSize.value = val
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	if (activeName.value == "4") {
		const res = await getAxios(`/knowledge/kbComment/recentComment`, {
			current: 1,
			size: val,
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = res.total
		list.value = res.records
	} else if (activeName.value == "5") {
		const res = await getAxios(`/knowledge/kbBasicTrash/page`, {
			current: 1,
			size: val,
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = res.total
		list.value = res.records
	} else {
		const res = await getAxios(`/kb/modelBaisc/selectBasic`, {
			current: 1,
			size: val,
			status: activeName.value,
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			title: title.value,
			fromTime: times.value,
			type: typeStr.value,
		})
		total.value = res.total
		list.value = res.records
	}
}
//清空
const delLists = index => {
	divideList.value.splice(index, 1)
	checked.value.splice(index, 1)
	if (divideList.value.length == 0) {
		active.value = 0
		empty()
		created()
	}
}
//清空
function empty() {
	checked.value = []
	time.value = []
	divideList.value = []
}
const restoreList = ref([])
const restore = async val => {
	ElMessageBox.confirm("是否确认恢复", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		restoreList.value = [
			{
				id: val.trashId,
				basicId: val.id,
				type: typeStr.value,
			},
		]
		try {
			await postAxios("/knowledge/kbBasicTrash/editBatch", restoreList.value)
			ElMessage.success("恢复成功")
			const rss = await getAxios(`/knowledge/kbBasicTrash/page`, {
				current: current.value,
				size: pageSize.value,
				type: typeStr.value,
			})
			total.value = +rss.total
			list.value = rss.records
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
const delRestore = async val => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		restoreList.value = [
			{
				id: val.trashId,
				basicId: val.id,
				type: typeStr.value,
			},
		]
		try {
			await postAxios("/knowledge/kbBasicTrash/deleteBatch", restoreList.value)
			ElMessage.success("删除成功")
			const rss = await getAxios(`/knowledge/kbBasicTrash/page`, {
				current: current.value,
				size: pageSize.value,
				type: typeStr.value,
			})
			total.value = +rss.total
			list.value = rss.records
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
function pickerOptions(time) {
	return time.getTime() > Date.now()
}
const selectClick = val => {
	restoreList.value = []
	val.forEach(item => {
		restoreList.value.push({
			id: item.trashId,
			basicId: item.id,
			type: typeStr.value,
		})
	})
}
const selectAll = val => {
	restoreList.value = []
	val.forEach(item => {
		restoreList.value.push({
			id: item.trashId,
			basicId: item.id,
			type: typeStr.value,
		})
	})
}
const delTags = async () => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		if (restoreList.value.length == 0) {
			return ElMessage.error("请至少勾选一个")
		}
		try {
			await postAxios("/knowledge/kbBasicTrash/deleteBatch", restoreList.value)
			ElMessage.success("删除成功")
			const rss = await getAxios(`/knowledge/kbBasicTrash/page`, {
				current: current.value,
				size: pageSize.value,
				type: typeStr.value,
			})
			restoreList.value = []
			total.value = +rss.total
			list.value = rss.records
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
//编辑
const edit = val => {
	router.push({ path: "/knowledgeEditing", query: { id: val.id, swId: val.swId } })
}
const editTable = async val => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		try {
			if (actives.value == 1) {
				await postAxios(`/knowledge/kbBasic/deleteBatch`, [val.id])
			} else {
				await postAxios(`/knowledge/kbVideo/deleteBatch`, [val.id])
			}
			listTable(eventStr.value)
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.zhiShi {
	background-color: #f8f8f8;
	height: 100%;
	overflow-y: scroll;
	.left-top-content {
		padding: 10px 15px;
		border: 1px solid #eceef5;
		margin: 20px 0 30px;

		.nav {
			.c666 {
				margin-right: 10px;
				max-width: 120px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			:deep(.el-switch) {
				margin-left: 20px;
			}
		}

		:deep(.el-tag__close) {
			background-color: #2972fa;
			color: #fff;
		}

		.choice-tag {
			height: 25px;
			line-height: 1;
			background: #f4faff;
			border: 1px solid #2972fa;
			border-radius: 15px;
			padding: 0 10px;
			color: #2972fa;
			font-size: 12px;
			margin-right: 10px;
			@include maxWidth(768) {
				margin-bottom: 1vh;
			}
		}

		.row {
			border-bottom: 1px dashed #eceef5;
			padding: 15px 0;
		}

		.label {
			width: 100px;
			@include maxWidth(1400) {
				width: 90px;
			}
			@include maxWidth(768) {
				width: 80px;
			}
			@include maxWidth(500) {
				width: 70px;
			}
		}
	}

	:deep(.el-tabs__active-bar) {
		height: 1px;
	}

	:deep(.el-tabs__nav-wrap::after) {
		height: 1px;
	}

	.left-bottom {
		padding: 30px;

		.table-head {
			height: 60px;

			:deep(.el-input) {
				margin-right: 10px;
			}
			.primary {
				margin-left: 20px;
			}
			.danger {
				color: #ff952c;
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
			cursor: pointer;
		}
		:deep(.el-table__row) {
			&:hover {
				.title-hover {
					color: #2971ff;
				}
			}
		}
		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 60px;
			color: #606266;
		}
	}
}
.pagination-class {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
:deep(.el-date-editor.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 200px;
	}
	@include maxWidth(1024) {
		width: 180px;
	}
	@include maxWidth(768) {
		width: 150px;
	}
	@include maxWidth(650) {
		display: none;
	}
}
:deep(.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 200px;
	}
	@include maxWidth(1024) {
		width: 180px;
	}
	// @include maxWidth(900) {
	// 	width: 100px;
	// }
	@include maxWidth(768) {
		width: 150px;
	}
	@include maxWidth(400) {
		width: 120px;
	}
}
.timi-dis {
	@include maxWidth(650) {
		display: none;
	}
}
.disNo {
	@include maxWidth(768) {
		display: none;
	}
}
.fen-ax {
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;
}
:deep(.el-button.is-disabled) {
	background-color: #2971ff !important;
}
.dangerB {
	display: flex;
	justify-content: flex-end;
	padding-right: 20px;
	padding-bottom: 10px;
}
</style>
